<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 实现页面的基本布局 -->
      <el-card class="tree-card">
        <!-- 用了一个行列布局 -->
        <tree-tools
          :tree-node="company"
          :is-root="true"
          @addDepts="addDepts"
        ></tree-tools>
        <!-- 下面就是树形控件内容了 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <tree-tools
            slot-scope="{ data }"
            :tree-node="data"
            @delDepts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepts"
          ></tree-tools>
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
        </el-tree>
      </el-card>
    </div>
    <!-- 增加弹框 -->
    <!-- $event在原生时间里面表示事件对象：在自定义时间里面表示组件传递出来的数据-->
    <!-- 组件标签：自定义属性名=“变量 @update自定义属性名=“变量=$event”” -->
    <!-- // 1.放置弹层组件增加ref属性，值为addDept -->
    <AddDept
      :tree-node="node"
      @addDepts="getDepartments"
      @update:showDialog="showDialog = $event"
      ref="addDept"
    ></AddDept>
  </div>
</template>

<script>
import treeTools from "./components/tree-tools.vue";
import { getDepartments } from "@/api/departments";
import { tranListToTreeData } from "@/utils/index";
import AddDept from "./components/add-dept.vue";
// console.log(getDepartments);
export default {
  components: { treeTools, AddDept },
  name: "Departments",
  data() {
    return {
      defaultProps: {
        label: "name"
      },
      departs: [],
      company: {}, // 就是头部的数据结构
      node: null // 点击当前这一项的对象
    };
  },
  created() {
    this.getDepartments(); // 调用自身的方法
  },
  methods: {
    async getDepartments() {
      // 1.发送请求
      const result = await getDepartments();
      // console.log(result);
      // 2，错误处理
      // 3.成功处理
      // 3.1加工数据
      // 3.2 赋值数据
      this.company = { name: result.companyName, manager: "负责人", id: "" };
      // this.departs=result.depts// 需要将其转化成树形结构
      // 这里定义一个空串  因为 它是根 所有的子节点的数据pid 都是 ""
      this.departs = tranListToTreeData(result.depts, ""); // 需要将其转化成树形结构
    },
    // 部门功能
    // 1.配置路由 2.布局内容 3.书写功能
    // 3.1 列表功能  a.data定义变量 b.methods请求请求方法
    // b-1 封装请求方法  b-2.发送请求 b-3 错误处理 b-4 成功处理(加工数据，赋值数据)
    // c created调用请求方法  d .渲染数据
    addDepts(node) {
      this.$refs.addDept.showDialog = true;
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node;
    },
    // 2. 点击编辑触发的父组件的方法
    editDepts(node) {
      // 1.打开弹层
      this.$refs.addDept.showDialog = true; // 显示新增组件弹层
      this.node = node; // 存储传递过来的node数据
      // 我们需要在这个位置 调用子组件的方法
      // 父组件 调用子组件的方法，通过 $refs.addDept找到该组件，调用他的方法，传递数据给他
      // console.log(this.$refs.addDept);
      this.$refs.addDept.getDepartDetail(node.id);
    }
  }
};
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
